<!DOCTYPE html>
<html>
<%@page pageEncoding="UTF-8" %>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>index</title>

    <!--导入css连接-->
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />

    <link rel="stylesheet" type="text/css" href="../css/style.css" />

    <!--导入js连接-->
    <script src="../js/jquery-2.1.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>

</head>

<body style="background-color: #F6F6F6;">

<!--顶部导航栏-->
<nav id="top" class="collapse navbar-collapse">
    <div class="container">
        <div class="row">

            <div class="col-xs-6">
                <ul class="top-link" style="float: left;">
                    <li>
                        <a href="index.jsp">首页</a>
                    </li>
                    <li>
                        <a href="#">华为官网</a>
                    </li>
                    <li>
                        <a href="#">荣耀官网</a>
                    </li>
                    <li>
                        <a href="#">花粉俱乐部</a>
                    </li>
                    <li>
                        <a href="goods.jsp">购物商城</a>
                    </li>
                    <li>
                        <a href="category.jsp">更多精彩</a>
                    </li>
                </ul>
            </div>

            <div class="col-xs-6">
                <ul class="top-link">
                    <li>
                        <a href="goods.jsp">华为商城</a>
                    </li>
                    <li>
                        <a href="#">花粉俱乐部</a>
                    </li>
                    <li>
                        <a href="cart.jsp">购物车</a>
                    </li>
                    <li>
                        <a href="login.jsp">登录</a>
                    </li>
                    <li>
                        <a href="register.jsp">注册</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

<!--下拉导航-->
<nav id="menu" class="navbar" style="margin-bottom: 0px;">
    <div class="container">

        <!--压缩之后下拉展示-->
        <div class="navbar-header"><span id="heading" class="visible-xs">展示</span>
            <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
        </div>
        <input type="text" id="inputEmail3" placeholder="搜索"  style="float: right; display: block; margin: auto 0;" >
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="index.jsp">首页</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">产品</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">关于荣耀</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">新闻评测</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">视频</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">活动</a>
                </li>
                <li class="dropdown">
                    <a href="list.goods">商品展示</a>
                </li>

            </ul>


        </div>

    </div>
</nav>

<!--轮播图片-->
<div id="page-content" class="home-page" style="margin-top:0;">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">

                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

                    <ol class="carousel-indicators hidden-xs">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="../img/lb1.jpg" alt="First slide">

                            <div class="header-text hidden-xs">
                                <div class="col-md-12 text-center">
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <img src="../img/lb2.jpg" alt="Second slide">

                            <div class="header-text hidden-xs">
                                <div class="col-md-12 text-center">
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <img src="../img/lb3.jpg" alt="Third slide">

                            <div class="header-text hidden-xs">
                                <div class="col-md-12 text-center">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--上一张，下一张-->
                    <a class="carousel-control-prev" href="#carousel-example-generic" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#carousel-example-generic" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>
        </div>

        <!--中间图片显示-->
        <div class="row" style="margin-left: 0px;margin-right: 0px;">
            <div class="banner">
                <a href="product.html"><img src="../img/show.gif" /></a>
            </div>
        </div>

        <!--相关推荐-->
        <div class="row">
            <div class="col-lg-12">
                <div class="heading">
                    <h2>相关推荐</h2></div>
                <div class="products">

                    <!--第一个-->
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="product" style="background-color: white;padding: 10px 0px 30px 10px;">

                            <div class="buttons">
                                <span style="font-size: 25px;color: black;">荣耀20</span><br>
                                <span>定格奇幻之美</span>
                            </div>

                            <div class="image">
                                <a href="product.html">
                                    <img src="../img/phone1.jpg" />
                                </a>
                            </div>

                            <div class="buttons" style="margin-top: 30px;">

                                <a href="product.html"><img src="../img/buy.gif" /></a>
                            </div>

                        </div>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="product" style="background-color: white;padding: 10px 0px 30px 0px;">

                            <div class="buttons">
                                <span style="font-size: 25px;color: black;">荣耀9X</span><br>
                                <span>快由“芯”生 超能旗舰</span>
                            </div>

                            <div class="image">
                                <a href="product.html">
                                    <img src="../img/phone2.jpg" />
                                </a>
                            </div>

                            <div class="buttons" style="margin-top: 30px;">

                                <a href="product.html"><img src="../img/buy.gif" /></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="product" style="background-color: white;padding: 10px 0px 30px 0px;">

                            <div class="buttons">
                                <span style="font-size: 25px;color: black;">荣耀V30</span><br>
                                <span>5G标杆 不止于快</span>
                            </div>

                            <div class="image">
                                <a href="product.html">
                                    <img src="../img/phone3.jpg" />
                                </a>
                            </div>

                            <div class="buttons" style="margin-top: 30px;">

                                <a href="product.html"><img src="../img/buy.gif" /></a>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="product" style="background-color: white;padding: 10px 0px 30px 0px;">
                            <div class="buttons">
                                <span style="font-size: 25px;color: black;">荣耀20青春版</span><br>
                                <span>AMOLED屏幕指纹 解锁你的美</span>
                            </div>

                            <div class="image">
                                <a href="product.html">
                                    <img src="../img/phone4.jpg" />
                                </a>
                            </div>

                            <div class="buttons" style="margin-top: 30px;">

                                <a href="product.html"><img src="../img/buy.gif" /></a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="margin-left: 0px;margin-right: 0px;">
            <div class="banner">
                <img src="../img/show2.gif" />
            </div>
        </div>


        <div class="row">
            <div class="col-lg-12">
                <div class="heading">
                    <h2>最新消息</h2></div>

                <div class="products">
                    <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
                        <div class="product" style="background-color: white;">
                            <div class="image">
                                <a href="product.html">
                                    <img src="../img/phone5.png" />
                                </a>
                            </div>
                            <div class="buttons">
                                <a href="#" style="background-color: white;">5G标杆不止于快 全系5G双模手机荣耀V30</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
                        <div class="product" style="background-color: white;">
                            <div class="image">
                                <a href="product.html"><img src="../img/phone6.png" /></a>
                            </div>
                            <div class="buttons">
                                <a href="#" style="background-color: white;">荣耀MagicBook京东平台销量破万台，表现强势！</a>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
                        <div class="product" style="background-color: white;">
                            <div class="image">
                                <a href="product.html"><img src="../img/phone7.png" /></a>
                            </div>
                            <div class="buttons">
                                <a href="#" style="background-color: white;">荣耀20 斩获2000-3000元价位单品销量冠军！</a>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!--下面的大牌图片-->
        <div class="row">
            <div class="banner mx-0">
                <div class="col-sm-6">
                    <img src="../img/show3.gif" />
                </div>
                <div class="col-sm-6">
                    <img src="../img/show4.gif" />
                </div>
            </div>
        </div>

    </div>
</div>

<!--脚步-->
<footer>
    <div class="container">
        <div class="wrap-footer">
            <div class="row">
                <!--<div class="col-md-3 col-footer footer-1">

            </div>
            -->
                <div class="col-md-3 col-footer footer-1">
                    <div class="heading">
                        <h4>关于荣耀</h4></div>
                    <ul>
                        <li>
                            <a href="#">荣耀锐影像</a>
                        </li>
                        <li>
                            <a href="#">荣耀大事记</a>
                        </li>
                        <li>
                            <a href="#">荣耀人物</a>
                        </li>
                        <li>
                            <a href="#">品牌问题</a>
                        </li>
                        <li>
                            <a href="#">新闻中心</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-3 col-footer footer-2">
                    <div class="heading">
                        <h4>产品</h4></div>
                    <ul>
                        <li>
                            <a href="#">手机</a>
                        </li>
                        <li>
                            <a href="#">荣耀智慧屏</a>
                        </li>
                        <li>
                            <a href="#">笔记本&平板</a>
                        </li>
                        <li>
                            <a href="#">穿戴设备</a>
                        </li>
                        <li>
                            <a href="#">智能家庭</a>
                        </li>
                        <li>
                            <a href="#">配件</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-3 col-footer footer-3">
                    <div class="heading">
                        <h4>快速链接</h4></div>
                    <ul>
                        <li>
                            <a href="#">物料下载</a>
                        </li>
                        <li>
                            <a href="#">移动端官网</a>
                        </li>
                        <li>
                            <a href="#">华为商城</a>
                        </li>
                        <li>
                            <a href="#">华为开发者联盟</a>
                        </li>
                        <li>
                            <a href="#">华为云</a>
                        </li>
                    </ul>
                </div>

                <div class="col-md-3 col-footer footer-4">
                    <div class="heading">
                        <h4>联系我们</h4></div>
                    <ul>
                        <li><span class="glyphicon glyphicon-home"></span>California, United States 3000009</li>
                        <li><span class="glyphicon glyphicon-earphone"></span>950800</li>
                        <li><span class="glyphicon glyphicon-envelope"></span>infor@yoursite.com</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="copyright">
        <div class="container">
            <div class="row">

                <span>法律声明  |   隐私声明  |   免责条款  |   关于cookies</span><br />
                <span>Copyright © 2011-2019 华为终端有限公司 版权所有 保留一切权利  |  苏公网安备 32011402010006号 粤ICP备19015064号</span>

            </div>
        </div>
    </div>
</footer>

</body>

</html>